.menu {
  background: #4FBD53;
  color: white;
  display: flex;

  .item {
    flex-grow: 1;
    text-align: center;
    padding:5px 0 0 0;

    .icon {
      font-size: 20px;
      height: 20px;
      margin-bottom: 3px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;

      &.setting {
        background-image: url("./image/setting.png");
      }

      &.contact {
        background-image: url("./image/contact.png");
      }

      &.notice {
        background-image: url("./image/notice.png");
      }

      &.home {
        background-image: url("./image/home.png");
      }
    }

    .title {
      font-size: 12px;
      line-height: 20px;
    }

    &.active {
      background: #48a057;
      .icon{
        &.setting {
          background-image: url("./image/setting_active.png");
        }

        &.contact {
          background-image: url("./image/contact_active.png");
        }

        &.notice {
          background-image: url("./image/notice_active.png");
        }

        &.home {
          background-image: url("./image/home_active.png");
        }
      }
    }
  }
}